import React, { Component } from 'react';
import { Form } from 'antd';
import { isObjectValEqual } from '/common/utils/utils';
// import keyCodes from '/common/keyCodes';
import isEqual from 'lodash/isEqual';
import isFunction from 'lodash/isFunction';

const FormItem = Form.Item;
/**
 * 列
 */
export default class EditableCell extends Component {

  componentDidMount() {
    const { onRef } = this.props;
    if (isFunction(onRef)) {
      onRef(this);
    }
    // console.log('EditableCell mount')
  }

  shouldComponentUpdate(nextProps, nextState) {
    return (!isObjectValEqual(nextProps, this.props) || !isObjectValEqual(nextState, this.state));
  }

  // componentDidUpdate(prevProps, prevState) {
  //   console.log('EditableCell update')
  // }

  save = (e, afterCB) => {
    const {
      record,
      onSave,
      dataIndex,
      rowIndex,
    } = this.props;
    // const error = this.form.getFieldsError([dataIndex]);
    const value = this.form.getFieldValue(dataIndex);
    // console.log(`${dataIndex} error:`, error);
    // console.log(`${dataIndex} value:`, value);
    if (!isEqual(value, record[dataIndex])) {
      // console.log(`record['${dataIndex}']:`, record[dataIndex]);
      onSave(value, dataIndex, rowIndex, afterCB);
    } else {
      isFunction(afterCB) && (afterCB());
    }
  };

  getFieldsComp(form) {
    const {
      record,
      rowIndex,
      dataIndex,
      editingSetting,
    } = this.props;
    const settingObj = editingSetting(record[dataIndex], record, rowIndex);
    const comp = React.cloneElement(settingObj.comp);

    if ('undefined' === typeof comp || null === comp) {
      console.error(dataIndex + '列 editingSetting 缺少 comp');
      return null;
    }
    this.comp = comp;

    return (
      <FormItem style={{ margin: 0 }}>
        {form.getFieldDecorator(dataIndex, settingObj.options || {})(comp)}
      </FormItem>
    );
  }

  render() {
    const {
      record,
      rowIndex,
      colIndex,
      dataIndex,
      title,
      editable,
      editing,
      editingSetting,
      onSave,
      onChangeEdit,
      onRef,
      EditableContext,
      ...restProps
    } = this.props;

    const defaultTdStyle = restProps.style || {};

    return (
      <td {...restProps}
          style={
            editable ? {
              cursor: 'pointer',
              backgroundColor: 'rgb(242, 251, 255)',
              ...defaultTdStyle,
            } : defaultTdStyle
          }
      >
        {editable ? (
          <EditableContext.Consumer>
            {(form) => {
              this.form = form;
              return (
                editing ? (
                  this.getFieldsComp(form)
                ) : (
                  <div className='no-edit-wrap'>
                    {restProps.children}
                  </div>
                )
              );
            }}
          </EditableContext.Consumer>
        ) : <div className='no-edit-wrap'>{restProps.children}</div>
        }
      </td>
    );
  }
}
